<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="light" id="light" value="开/关灯" onclick="fp()"/>
		<img src="imgs/off.gif" id="off">
		
		
		<select name="se" id="sec" onchange="getPro()">//onchange()，监听select中选项的切换
			<option value="芜湖市" >芜湖市</option>
			<option value ="成都市">成都市</option>
			<option value ="白静">白静</option>
		</select>
		
		<select id="city">
			
		</select>
	</body>
	<script type="text/javascript">
		var flag=true;
		var img1=document.getElementById("off")
		img1.src="imgs/on.gif"
		function fp(){
			if(flag==true){img1.src="imgs/off.gif";flag=false;}
			else {img1.src="imgs/on.gif";flag=true}
		}
		
		function get(){
			var sec=document.getElementById("sec")
			alert(sec.value)
		}
		
		
		var data={"芜湖市":["开冲","起飞"],
			"成都市":["武侯","双流"],
			"白静":["AE市","docu"]};
		
		
			function getPro(){
				var pro=document.getElementById("sec").value
				console.log(pro)
				var ci=data[pro]
				console.log(ci)
				var citysec=document.getElementById("city")
				for (let i = 0; i < ci.length; i++) {
					var opt=document.createElement("option");
					opt.innerHTML=ci[i]
					citysec.appendChild(opt)
				}
				// 在每次选择完后，需要清空所在城市
				
			}
		
	</script>
</html>
